<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/element.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/fy.css" />
		<script src="js/jquery-3.5.1.js"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/element.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="page_root fy_page">
				<el-card class="box-card" shadow="never">
					<div class="fy_top">
						<span>管理编号：CSTC/CQ-01</span>
						<span>报告编号：{{form.bgNo}}</span>
					</div>
					<div class="fy_title">检验报告<i></i></div>
					<div>
						<img src="img/fy_pic.png" style="margin: 0 auto;">
					</div>
					<div class="content">
						<el-row>
							<el-col :span="8"><div class="label">作 物 种 类:</div></el-col>
							<el-col :span="12"><div class="c_value">{{form.cropType}}</div></el-col>
						</el-row>
						<el-row>
							<el-col :span="8"><div class="label">品 种 名 称:</div></el-col>
							<el-col :span="12"><div class="c_value">{{form.cropName}}</div></el-col>
						</el-row>
						<el-row>
							<el-col :span="8"><div class="label">受 检 单 位:</div></el-col>
							<el-col :span="12"><div class="c_value">{{form.companyName}}</div></el-col>
						</el-row>
						<el-row>
							<el-col :span="8"><div class="label">检 验 类 别:</div></el-col>
							<el-col :span="12">
								<div class="c_value"  @click="dialogFormVisible = true" v-if="index == 0">
									<span style="display: block">{{form.testCategory}}</span>
								</div>
								<div class="c_value" v-else>
									<span style="display: block">{{form.testCategory}}</span>
								</div>
							</el-col>
						</el-row>
					</div>

					<div style="margin: 200px 0 100px;text-align: center;font-size: 20px">广州市农作物种子质量检验中心</div>
				</el-card>

				<el-dialog  :visible.sync="dialogFormVisible" width="30%">
					<el-form :model="form">
						<el-form-item >
							<el-input v-model="form.testCategory" autocomplete="off"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
		
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					// 样品集合
					ypItemActive: '1',
					ypList: [{
						title: '样品1',
						name: '1'
					}],
					dialogFormVisible:false,
					form:{
						cropType:'adasda',
						cropName:'sssss',
						companyName:'asd',
						bgNo:'',
						testCategory:''
					}
				},
				directives: {
					focus: {
						inserted: function (el) {
							el.querySelector('input').focus()
						}
					}
				},
				watch: {
					// form监听
					form: {
						handler: function(val) {
						    var bg1Arr = window.cache.bg1Arr;
                            window.cache.fyArr.forEach((item,i)=>{
                                item.testCategory = val.testCategory;
                                bg1Arr[i].testCate = val.testCategory;
                            })
						},
						deep: true
					}
				} ,
				created() {
					window.cache = window.parent.cache;
					var href = location.href
					this.index = href.substring(href.lastIndexOf("=")+1) - 1
					// this.getData(this.index)
				},
				methods: {
					getData(){
						var obj = window.cache.getItemData(this.index,'fy')
						// if(this.index != 0){
                        //     var first = window.cache.getItemData(0,'fy')
                        //     obj.testCategory = first.testCategory
						// }
						this.form = obj
					}
				}
			})
		</script>
	</body>
</html>
